<template>
	<div class="menu">
		<!-- 添加 -->
		<div class="add_box">
			<div class="add_left">
				<div class="add_left_icon">
					<el-icon><Tickets /></el-icon>
					<span class="add_left_icon_item">数据列表</span>
				</div>
			</div>
			<div class="add_right_btn">
				<el-button type="primary" @click="handleAdded">添加</el-button>
			</div>
		</div>
		<!-- 菜单列表 -->
		<div class="data_box">
			<el-table :data="tableList" border style="width: 100%">
				<el-table-column prop="id" label="编号" width="100" />
				<el-table-column prop="title" label="菜单名称" width="180" />
				<el-table-column label="菜单级数" width="180" v-if="parentId === 0">一级</el-table-column>
				<el-table-column label="菜单级数" width="180" v-else>二级</el-table-column>
				<el-table-column prop="name" label="前端名称" width="100" />
				<el-table-column prop="icon" label="前端图标" width="100" />
				<el-table-column label="是否显示" width="100">
					<template #default="scope">
						<div style="display: flex; align-items: center">
							<el-switch v-model.number="scope.row.hidden" :active-value="0" :inactive-value="1" @change="handleChange(scope.row)" />
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="sort" label="排序" width="100" />
				<el-table-column label="设置">
					<template #default="scope">
						<el-button size="small" type="primary" :disabled="parentId !== 0" :text="true" @click="secondMenu(scope.row)">查看下级</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right">
					<template #default="scope">
						<el-button size="small" type="danger" :text="true" @click="changEdit(scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页器 -->
		<div class="pagination_box">
			<el-pagination
				v-model:current-page="pagination.currentPage"
				v-model:page-size="pagination.pageSize"
				:page-sizes="[10, 20, 50, 100]"
				:small="false"
				:background="true"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pagination.total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</div>
	</div>
</template>

<script setup lang="ts">
// 图标
import { Tickets } from "@element-plus/icons-vue";
import useTable from "@/hooks/useTable";
import * as menu from "@/request/modules/menu";
import { ref } from "vue";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import type { updateStatusParams } from "@/types/global";
const router = useRouter();
const parentId = ref(0);
const route = useRoute();
// 菜单列表
let { tableList, pagination, handleSizeChange, handleCurrentChange, fetchData } = useTable(menu.menuListAPI, {
	parentId: parentId.value,
});
// 查看下一级
const secondMenu = (row: any) => {
	parentId.value = row.id;
	router.push(`/ums/menu?pid=${row.id}`);
	fetchData(row.id);
};
// 修改开关状态
const handleChange = async (row: updateStatusParams) => {
	await menu.updatedStatue({ id: row.id, hidden: row.hidden });
	fetchData();
	ElMessage({
		type: "success",
		message: "状态修改成功",
	});
};
// 组件内守卫监听url参数更新,path拿不到后面的参数
onBeforeRouteUpdate((to, from, next) => {
	if (to.fullPath == `/ums/menu?pid=${route.query.pid}` && from.fullPath == `/ums/menu?pid=${route.query.pid}`) {
		fetchData(route.query.pid as unknown as number);
	}
	if (from.fullPath == `/ums/menu?pid=${route.query.pid}` && to.fullPath == `/ums/menu`) {
		parentId.value = 0;
		fetchData();
	}
	next();
});
// 添加菜单
const handleAdded = () => {
	router.push(`/ums/addMenu`);
};
// 跳转编辑
const changEdit = (row: updateStatusParams) => {
	router.push(`/ums/addMenu?id=${row.id}`);
};
</script>

<style lang="less" scoped>
.menu {
	padding: 20px 20px 10px;

	// 添加
	.add_box {
		height: 61px;
		padding: 20px;
		margin: 20px 0;
		border-radius: 4px;
		box-shadow: 0 0 5px 3px #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.add_left_icon {
			display: flex;
			align-items: center;
			.add_left_icon_item {
				font-size: 14px;
				margin-left: 10px;
			}
		}
	}
	// 数据列表
	.data_box {
		padding-bottom: 20px;
		font-size: 12px;
		overflow-x: auto;
		:deep(.el-table .cell) {
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			font-size: 12px;
		}
	}
	// 分页器
	.pagination_box {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
}
</style>
